<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.activate{
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
		
		<div id="app1">
			{{massage}}
			<p>{{person.name}} {{person.tel}}</p>
			<li v-for="item in address">{{item}}</li>
		</div>
		
		<div id="app2">
			<input type="button" value="v-on事件" v-on:click="doit"/>
			<input type="button" value="v-on简写" @click="doit"/>
			<h2 v-on:click="changeFood">{{food}}</h2>
		</div>
		
		<div id="app3">
			<input type="button" value="点击切换显示状态" v-on:click="changeShow"/>
			<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2018-10-23%2F5bceda4bad073_120_80.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648810368&t=1732442d82209001dc3a765ea1414a37" v-show="isShow"/>
			<p v-if="isShow">显示内容</p>
		</div>
		
		<br />
		
		<div id="app4">
			<img v-bind:src="imgSrc" :title="imgTil" :class="{activate:isActivate}" @click="changeAct"/>
		</div>
		
		<div id="app5">
			<input type="button" value="添加数据" @click="push"/>
			<input type="button" value="删除数据" @click="pop"/>
			<li v-for="food in someFood">{{food}}</li>
		</div>
		<div id="app6">
			<input type="text" value="请输入内容" @keyup.Enter="saySth"/>
		</div>
		
		<div id="app7">
			<input type="text" v-model="msg" v-on:keyup.Enter="showM"/>
			{{msg}}
		</div>
		
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var vm1 = new Vue({
				el:"#app1",
				data:{
					massage:'Hellow, Vue!',
					person:{
						name:"小圆",
						tel:"13356"
					},
					address:['上海','北京','杭州','深圳','广州']
				}
			})
			
			var vm2 = new Vue({
				el: "#app2",
				data:{
					food:"粉红蛋糕"
				},
				methods:{
					doit:function(){
						alert("学vue");
					},
					changeFood:function(){
						this.food+="so good！"
					}
				}
			})
			
			var vm3 = new Vue({
				el:"#app3",
				data:{
					isShow:false,
				},
				methods:{
					changeShow:function(){
						this.isShow=!this.isShow;
					}
				}
			})
			
			var vm4 = new Vue({
				el:"#app4",
				data:{
					imgSrc:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx4.sinaimg.cn%2Fmw690%2Fc5d20936ly1gyi5ha9blzj205k05kdfo.jpg&refer=http%3A%2F%2Fwx4.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648810368&t=9da76828bc40254015dd73d315c39468",
					imgTil:"一张图片",
					isActivate:false
				},
				methods:{
					changeAct:function(){
						this.isActivate=!this.isActivate;
					}
				}
			})
			
			var vm5 = new Vue({
				el:"#app5",
				data:{
					someFood:[
						"荷包蛋","煎蛋卷","炒蘑菇","披萨","沙拉"
					]
				},
				methods:{
					push:function(){
						this.someFood.push("生命药水");
					},
					pop:function(){
						this.someFood.shift();
					}
				}
			})
			
			var vm6 = new Vue({
				el:"#app6",
				methods:{
					saySth:function(){
						alert("知道啦");
					}
				}
			})
			
			var vm7 = new Vue({
				el:"#app7",
				data:{
					msg:"文本内容"
				},
				methods:{
					showM:function(){
						alert(this.msg);
					}
				}
			})
			
		</script>
		
	</body>
</html>
